---
title: Accordion
description: A set of collapsible panels with headings.
author:
  name: imskyleen
  url: https://github.com/imskyleen
releaseDate: 2025-09-07
---

<ComponentPreview name="demo-primitives-base-accordion" />

## Installation

<ComponentInstallation name="primitives-base-accordion" />

## Usage

```tsx
<Accordion>
  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger>Accordion Item 1</AccordionTrigger>
    </AccordionHeader>
    <AccordionPanel>
      <div>Accordion Content 1</div>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger>Accordion Item 2</AccordionTrigger>
    </AccordionHeader>
    <AccordionPanel>
      <div>Accordion Content 2</div>
    </AccordionPanel>
  </AccordionItem>
</Accordion>
```

## API Reference

### Accordion

<ExternalLink
  href="https://base-ui.com/react/components/accordion#root"
  text="Base UI API Reference - Accordion.Root"
/>

### AccordionItem

<ExternalLink
  href="https://base-ui.com/react/components/accordion#item"
  text="Base UI API Reference - Accordion.Item"
/>

### AccordionHeader

<ExternalLink
  href="https://base-ui.com/react/components/accordion#header"
  text="Base UI API Reference - Accordion.Header"
/>

### AccordionTrigger

<ExternalLink
  href="https://base-ui.com/react/components/accordion#trigger"
  text="Base UI API Reference - Accordion.Trigger"
/>

### AccordionPanel

<ExternalLink
  href="https://base-ui.com/react/components/accordion#panel"
  text="Base UI API Reference - Accordion.Panel"
/>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the accordion panel',
      type: 'Transition',
      required: false,
      default: "{ duration: 0.35, ease: 'easeInOut' }",
    },
    keepRendered: {
      description:
        'Whether to keep the accordion panel rendered (useful for SEO)',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    '...props': {
      description: 'The props of the accordion panel.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

<Callout type="info">
  The `render` and `keepMounted` props are not supported in the `AccordionPanel`
  component as it is used for animation.
</Callout>

## Credits

- [Base UI Accordion](https://base-ui.com/react/components/accordion)
